<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>机构管理</title>
    <div th:replace="common/base"></div>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div style="margin: 0px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item" style="margin: 0px">
                    <div class="layui-inline">
                        <label class="layui-form-label">机构名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keyword" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="btnSearch" type="submit" class="layui-btn layui-btn-primary" lay-submit
                                lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <script type="text/html" id="toolbarOrganization">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add"><i
                        class="layui-icon">&#xe654;</i>添加
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"><i
                        class="layui-icon">&#xe640;</i>删除
                </button>
            </div>
        </script>

        <table id="organizationTable" lay-filter="organizationTable"></table>

        <!-- 操作列 -->
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
        </script>
    </div>
</div>

<!-- 表单弹窗 -->
<script type="text/html" id="organizationDialog">
    <div id="organizationFrm" class="layui-form model-form" action="" lay-filter="organizationFrm">
        <input type="hidden" name="id"/>
        <input type="hidden" name="isDeleted" value="0">
        <div class="layui-form-item">
            <label class="layui-form-label">上一级</label>
            <div class="layui-input-block">
                <div id="pidSel" class="ew-xmselect-tree"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" lay-verify="required" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="sort" lay-verify="required" placeholder="请输入排序码"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="organizationSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </div>
</script>
<div th:replace="common/baseJS"></div>
<script th:inline="none">
    layui.use(['form', 'treeTable', 'xmSelect', 'ab'], function () {
        var $ = layui.jquery,
            form = layui.form,
            treeTable = layui.treeTable,
            xmSelect = layui.xmSelect,
            ab = layui.ab;

        // 渲染表格
        var loadingIdx = layer.load(2);
        var dplTable = treeTable.render({
            elem: '#organizationTable',
            toolbar: '#toolbarOrganization',
            // url: '/system/organization/findAll',
            // page: false,
            tree: {
                iconIndex: 2,           // 折叠图标显示在第几列
                isPidData: true,        // 是否是id、pid形式数据
                idName: 'id',  // id字段名称
                pidName: 'pid'     // pid字段名称
            },
            cols: [[
                {type: 'numbers'},
                {type: 'checkbox'},
                {field: 'name', minWidth: 200, title: '名称'},
                {title: '操作', width: 120, templet: '#currentTableBar', align: 'center'}
            ]],
            reqData: function (data, callback) {
                // 在这里写ajax请求，通过callback方法回调数据
                ab.ajax({
                    url: '/system/organization/findList',// 请求地址
                    type: "get",// 请求提交方式
                    data: {},// 发送回去的数据 JSON.stringify(data)
                    success: function (data) {
                        callback(data);
                    }
                });
            },
            done: function () {
                layer.close(loadingIdx);
            }
        });

        /* 表格头工具栏点击事件 */
        treeTable.on('toolbar(organizationTable)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                showEditModel();
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('organizationTable')
                    , data = checkStatus.data;
                if (data.length == 0) {
                    ab.window.msg("请至少选择一条数据！", "error");
                    return;
                }
                var ids = [];
                for (var i = 0; i < data.length; i++) {
                    ids.push(data[i].id);
                }
                ab.util.deleteForm({
                    url: "/system/organization",// 请求地址
                    type: "delete",// 请求提交方式
                    data: JSON.stringify(ids),// 发送回去的数据 JSON.stringify(data)
                    success: function (data) {
                        $("#btnSearch").click();
                    }
                });
            }
        });

        /* 表格操作列点击事件 */
        treeTable.on('tool(organizationTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                showEditModel(data);
            } else if (obj.event === 'delete') {
                ab.util.deleteForm({
                    url: "/system/organization",// 请求地址
                    type: "delete",// 请求提交方式
                    data: JSON.stringify([data.id]),// 发送回去的数据 JSON.stringify(data)
                    success: function (data) {
                        dplTable.refresh();
                    }
                });
            }
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = data.field;
            if (result.keyword) {
                dplTable.filterData(result.keyword);
            } else {
                dplTable.clearFilter();
            }

            return false;
        });
        // //自定义验证规则
        // form.verify({
        //     name: function (value) {
        //         if (value.length < 2) {
        //             return '模块名称至少得2个字符啊';
        //         }
        //     }
        // });

        /* 显示表单弹窗 */
        function showEditModel(mData) {
            ab.window.open({
                id: "addOrganization",
                title: (mData ? '修改' : '添加') + '机构',
                content: $("#organizationDialog").html(),//"/system/appModule/form",
                area: "500px",
                success: function (layero, dIndex) {
                    // 回显表单数据
                    form.val('organizationFrm', mData);
                    //监听提交
                    form.on('submit(organizationSubmit)', function (data) {
                        data.field.pid = insXmSel.getValue('valueStr');
                        ab.util.submitForm({
                            url: "/system/organization",// 请求地址
                            type: !mData ? "post" : "put",// 请求提交方式
                            data: JSON.stringify(data.field),// 发送回去的数据 JSON.stringify(data)
                            success: function (data) {
                                layer.close(dIndex);
                                dplTable.refresh();
                            }
                        });
                        return true;
                    });
                    // 渲染下拉树
                    var insXmSel = xmSelect.render({
                        el: '#pidSel',
                        height: '250px',
                        data: dplTable.options.data,
                        initValue: mData ? [mData.pid] : [],
                        model: {label: {type: 'text'}},
                        // layVerify: 'required',
                        // layVerType: 'msg',
                        prop: {
                            name: 'name',
                            value: 'id'
                        },
                        radio: true,
                        clickClose: true,
                        tree: {
                            show: true,
                            indent: 15,
                            strict: false,
                            expandedKeys: true
                        }
                    });
                    // 禁止弹窗出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }
    });
</script>
</body>
</html>